<style>
    .noticeFont {
        color: red;
    }
</style>
<div class="layui-fluid layui-anim febs-anim" id="businesses-major" lay-title="统计详情">
    <div class="layui-row febs-container">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body febs-table-full">
                    <div class="layui-row">
                        <div class="layui-col-md2">
                            <label>应读</label>
                        </div>
                        <div class="layui-col-md1">
                            <span class="noticeFont" id="count"></span>
                        </div>
                        <div class="layui-col-md2">
                            <label>已读</label>
                        </div>
                        <div class="layui-col-md1">
                            <span class="noticeFont" id="readCount"></span>
                        </div>
                        <div class="layui-col-md2">
                            <label>未读</label>
                        </div>
                        <div class="layui-col-md1">
                            <span class="noticeFont" id="unread"></span>
                        </div>
                        <div class="layui-col-md2">
                            <label>进度</label>
                        </div>
                        <div class="layui-col-md1">
                            <span class="noticeFont" id="plan"></span>
                        </div>
                    </div>

                    <blockquote  style="margin-top: 10px;">

                        <div class="layui-row">
                            <div class="layui-btn layui-btn-sm layui-btn-primary febs-button-blue-plain table-action"
                                 id="export">
                                <i class="layui-icon layui-icon-export"></i>导出
                            </div>
                        </div>
                    </blockquote>
                    <input type="hidden" id="noticeId" data-th-value="${id}">
                    <div class="layui-collapse" lay-filter="test">
                    <div class="layui-colla-item">
                        <h2 class="layui-colla-title">在校生<i class="layui-icon layui-colla-icon"></i></h2>
                        <div class="layui-colla-content">
                            <table id="majorTable" lay-filter="majorTable" lay-data="{id: 'majorTable'}"></table>
                        </div>
                    </div>
                    <div class="layui-colla-item">
                        <h2 class="layui-colla-title">报考生<i class="layui-icon layui-colla-icon"></i></h2>
                        <div class="layui-colla-content">
                            <table id="majorTablePool" lay-filter="majorTablePool" lay-data="{id: 'majorTablePool'}"></table>
                        </div>
                    </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/html" id="xuhao">
    {{d.LAY_TABLE_INDEX+1}}
</script>
<script data-th-inline="none" type="text/javascript">
    layui.use(['dropdown', 'jquery', 'form', 'table', 'febs','element'], function () {
        let $ = layui.jquery,
            febs = layui.febs,
            form = layui.form,
            table = layui.table,
            dropdown = layui.dropdown,
            $view = $('#businesses-major'),
            $query = $view.find('#query'),
            $export = $view.find('#export'),
            $add = $view.find('#add'),
            $reset = $view.find('#reset'),
            $searchForm = $view.find('form'),
            sortObject = {field: '' + '', type: null},
            element = layui.element,
            tableIns;
        element.render();
        form.render();
        statistics();
        initTable();
        initTablet();


        //统计

        function statistics() {
            var noticeId = $("#noticeId").val();
            $.ajax({
                type: 'get',
                url: '/noticeUser/noticeUserCount',
                data: {noticeId: noticeId},
                success: function (res) {
                    if (res.flag != false) {
                        $("#count").text(res.count)
                        $("#readCount").text(res.readCount);
                        if (res.count > 0 && res.readCount >= 0) {
                            let unread = (parseInt(res.count)) - (parseInt(res.readCount));
                            if (unread > 0) {
                                $("#unread").text(unread)
                            } else {
                                $("#unread").text(0)
                            }
                            if (unread == 0) {
                                $("#plan").text("已完成")
                            } else {
                                $("#plan").text("未完成")
                            }
                        }
                    }
                }
            })
        }

        table.on('sort(majorTable)', function (obj) {
            sortObject = obj;
            tableIns.reload({
                initSort: obj,
                where: $.extend(getQueryParams(), {
                    field: obj.field,
                    order: obj.type
                })
            });
        });
        table.on('sort(majorTablePool)', function (obj) {
            sortObject = obj;
            tableIns.reload({
                initSort: obj,
                where: $.extend(getQueryParams(), {
                    field: obj.field,
                    order: obj.type
                })
            });
        });

        //导出excel文件------
        $export.on('click', function () {
            let params = $.extend(getQueryParams(), {field: sortObject.field, order: sortObject.type});
            params.pageSize = $view.find(".layui-laypage-limits option:selected").val();
            params.pageNum = $view.find(".layui-laypage-em").next().html();
            let d = new Date();
            let year = d.getFullYear(); // 年
            let month = d.getMonth() + 1; // 月
            let day = d.getDate(); // 日
            let hour = d.getHours(); // 时
            let minutes = d.getMinutes(); // 分
            let seconds = d.getSeconds(); //秒
            if (month >= 1 && month <= 9) {
                month = "0" + month;
            }
            if (day >= 0 && day <= 9) {
                day = "0" + day;
            }
            if (hour >= 0 && hour <= 9) {
                hour = "0" + hour;
            }
            if (minutes >= 0 && minutes <= 9) {
                minutes = "0" + minutes;
            }
            if (seconds >= 0 && seconds <= 9) {
                seconds = "0" + seconds;
            }
            let date = "" + year + month + day + '_' + hour + minutes + seconds;
            let noticeId = $("#noticeId").val();
            let time = '通知人员' + date + '.xlsx';
            febs.download(ctx + 'noticeUser/excel/' + noticeId, params, time);
        })

        $query.on('click', function () {
            let params = $.extend(getQueryParams(), {field: sortObject.field, order: sortObject.type});
            tableIns.reload({where: params, page: {curr: 1}});
        });


        $reset.on('click', function () {
            $searchForm[0].reset();
            sortObject.type = 'null';
            tableIns.reload({where: getQueryParams(true), page: {curr: 1}, initSort: sortObject});
        });

        function initTable() {
            let noticeId = $("#noticeId").val();
            tableIns = febs.table.init({
                elem: $view.find('#majorTable'),
                id: 'majorTable',
                url: ctx + 'noticeUser/statistics/' + noticeId,
                done: function (res, curr, count) {
                    $("table").css("width", "100%");
                },
                width: "100%",
                cols: [[
                    {title: '编号', templet: '#xuhao'},
                    {field: 'stuName', title: '阅读人',minWidth: 100},
                    {field: 'className', title: '班级唯一编码', minWidth: 180},
                    {field: 'tel', title: '手机号', minWidth: 120},
                    {field: 'readTime', title: '阅读时间', minWidth: 150, sort: true},
                    {field: 'detail', title: '是否阅读', minWidth: 100},

                ]]
            });
        }

        function initTablet() {
            let noticeId = $("#noticeId").val();
            tableIns = febs.table.init({
                elem: $view.find('#majorTablePool'),
                id: 'majorTablePool',
                url: ctx + 'noticeUser/statisticsPool/' + noticeId,
                done: function (res, curr, count) {
                    $("table").css("width", "100%");
                },
                width: "100%",
                cols: [[
                    {title: '编号', templet: '#xuhao'},
                    {field: 'stuName', title: '阅读人',minWidth: 100},
                    {field: 'className', title: '班级唯一编码', minWidth: 180},
                    {field: 'tel', title: '手机号', minWidth: 120},
                    {field: 'readTime', title: '阅读时间', minWidth: 150, sort: true},
                    {field: 'detail', title: '是否阅读', minWidth: 100},

                ]]
            });
        }

        function getQueryParams(flag) {
            let params = $searchForm.serializeJson();
            return params;
        }
    })

</script>
